@import './common';

.model-warp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1002;

	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
	}

	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		.box {
			position: relative;
			z-index: 10000;
			width: setSize(560);
			margin-top: setSize(-100);
			background-color: #fff;
			border-radius:setSize(8);

			.page{

				.page-container{
					text-align: center;

					.close-icon{
						position:absolute;
						right: setSize(10);
						top: setSize(20);
						display: block;
						width: setSize(60);
						height: setSize(60);
						box-sizing:border-box;
						padding:setSize(20);

						.icon{
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					.title{
						line-height: setSize(100);
						font-size:setSize(32);
						font-weight:600;
						color:rgba(0,0,0,1);
						border-bottom:setSize(1) solid #ccc;
					}

					.sub-title{
						margin-top: setSize(34);
						font-size:setSize(32);
						font-weight:500;
						color:rgba(51,51,51,1);
					}

					.price-box{
						margin-top: setSize(20);
						font-size:setSize(66);
						font-weight:600;
						color:rgba(0,0,0,1);

						.unit{
							font-size: setSize(32);
						}
					}

					.input-wrap{
						box-sizing:border-box;
						padding:setSize(60) setSize(30) setSize(30);

						.input-box{
							position: relative;
							border:setSize(1) solid #A4A4A4;

							.input-item+.input-item{
								border-left:setSize(1) solid #A4A4A4;
							}

							.input-item{
								width: setSize(500/6);
								height: setSize(500/6);
								line-height: setSize(500/6);
								box-sizing:border-box;
								padding:setSize(10);

								.input{
									width: 100%;
									height: 100%;
								}	
							}

							.pos-box{
								position:absolute;
								top: 0;
								left: 0;
								z-index: 1;
								width: 100%;
								height: 100%;
								overflow: hidden;
							}

							.pos-input{
								width: 100%;
								height: 100%;
								box-sizing:border-box;
								padding:setSize(100);
							}
						}
					}

				}
			}

		}
	}
}